<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<div id="app">
    <!--文本域，多行文本框-->
    <textarea v-model="text" placeholder="输入..."></textarea>
    <p >输入的内容是：</p><p style="white-space: pre">{{text}}</p>
    <input type="radio" v-model="picked" value="html" id="html">
    <label for="html">HTML</label>
    <br>
    <input type="radio" v-model="picked" value="js" id="js">
    <label for="js">JavaScript</label>
    <br>
    <input type="radio" v-model="picked" value="css" id="css">
    <label for="css">CSS</label>
    <br>
    <p>选择的项是：{{picked}}</p>
    <input type="checkbox" v-model="checked" id="checked">
    <label for="checked">选择状态：{{checked}}</label>
    <br>
    <input type="checkbox" v-model="checkedList" value="html5" id="html5">
    <label for="html5">HTML</label>
    <br>
    <input type="checkbox" v-model="checkedList" value="javaScript" id="javaScript">
    <label for="javaScript">JavaScript</label>
    <br>
    <input type="checkbox" v-model="checkedList" value="csss" id="csss">
    <label for="csss">CSS</label>
    <br>
    <p>选择的项是：{{checkedList}}</p>
    <br><br>
    <select v-model="selected">
        <!--如果有value，优先匹配value，否则直接匹配text-->
        <option>html5</option>
        <option value="js">JavaScript</option>
        <option>CSS</option>
    </select>
    <p>选择的项是：{{selected}}</p>
    <br><br>
    <select v-model="checkedList" multiple>
        <!--如果有value，优先匹配value，否则直接匹配text-->
        <option>html5</option>
        <option value="js">JavaScript</option>
        <option>csss</option>
    </select>
    <p>选择的项是：{{checkedList}}</p>
    <br><br>
    <select v-model="selectList">
        <option v-for="option in selectList"
                :value="option.value">
            {{option.text}}
        </option>
    </select>
    <p>选择的项是：{{selected}}</p>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            text: '',
            picked: 'js',
            checked: false,
            checkedList:['html5','csss'],
            selected:'html',
            selectList:[
                {
                    text: 'HTML',
                    value: 'html'
                },
                {
                    text: 'JavaScript',
                    value: 'js'
                },
                {
                    text: 'CSS',
                    value: 'css'
                }
            ]
        }
    })
</script>
</body>
</html>
